<template>
    <div>
     <el-row>
      <el-col :span="8" ><div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
             <div class="user">
              <img :src="userinfo.icon" alt="">
              <div class="userinfo">
                <p id="name">{{ userinfo.user.nickname}}</p>
                <p style="margin-left: 100px;">{{ username }}</p>
                <p id="info">{{ role }}</p>
              </div>
              
             </div>  
              <!-- <div>
                <p>上次登录时间：<span class="logininfo">2023-12-21</span></p>
                <p>上次登录地点：<span class="logininfo">新乡</span></p>
              </div> -->
          </el-card>  
          <el-card  shadow="hover" style="margin-top:20px;height:360px">
            <p style="margin-left: 140px;font-size: 20px;">数据统计情况</p>
            <div id="echarts2" style="width:400px;height: 210px"></div>
          </el-card> 
          </div>
      </el-col>
      <el-col :span="16" class="right">
        <div class="num">
          <el-card v-for="item in saleInfo" :key="item.id" class="slaeinfo" :body-style="{display:'flex',height:'80px'}" shadow="hover">                                
            <i :class="`el-icon-${item.icon}`" class="icon"></i>
            <div class="numinfo">
               <p id="price">{{ item.price }}</p>
               <p id="name">{{ item.name }}</p>
            </div>
            
          </el-card>
           
          <div class="rightbottom">
             <el-card style="height:220px" class="zhe"  shadow="hover">
               <div id="echarts1" style="width:900px;height: 250px">
                 
               </div>
          </el-card>
  
          <!-- <div class="two">
            <el-card style="height;:200px" class="flex"  shadow="hover">
              <div id="echarts2" style="width:400px;height: 200px"></div>
            </el-card>
            <el-card style="height:200px" class="flex"  shadow="hover">
              <div id="echarts3" style="width:400px;height: 200px"></div>
            </el-card>
          </div> -->
  
          </div>
         
        </div>
          
        
      </el-col>
     </el-row>
    </div>
  </template>
  <script>
  import reqHome from '@/api/home'
  import * as echarts from 'echarts';
  export default {
     
    created(){
      //查询文章统计情况
          this.getDatas(this.$store.state.userinfo.user.id)
      //查询最火的文章
          this.getHotArticles(this.$store.state.userinfo.user.id)
    },
  
        mounted(){
          
          this.getUserinfo(this.$store.state.userinfo.user.id)
                  // 基于准备好的dom，初始化echarts实例
          // var myChart1 = echarts.init(document.getElementById('echarts1'));
          // // 绘制图表
          // myChart1.setOption({
          //             xAxis: {
          //       type: 'category',
          //       data: ['苹果', '华为', '小米','oppo']
          //     },
          //     yAxis: {
          //       type: 'value'
          //     },
          //     series: [
          //       {
          //         data: [120, 200, 150,422],
          //         type: 'line'
          //       },
          //       {
          //         data: [500, 213, 423,422],
          //         type: 'line'
          //       },
          //       {
          //         data: [432, 233, 123,522],
          //         type: 'line'
          //       }
          //     ]
          // });
  
          // var myChart2 = echarts.init(document.getElementById('echarts2'));
          //   // 绘制图表
          //   myChart2.setOption({
          //           title: {
          //             text: 'ECharts 入门示例'
          //           },
          //           tooltip: {},
          //           xAxis: {
          //             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          //           },
          //           yAxis: {},
          //           series: [
          //             {
          //               name: '销量',
          //               type: 'bar',
          //               data: [5, 20, 36, 10, 10, 20]
          //             }
          //           ]
          //         });
  
          //  var myChart3 = echarts.init(document.getElementById('echarts3'));
          //    // 绘制图表
          //    myChart3.setOption({
          //     series: [
          //             {
          //               type: 'pie',
          //               data: [
          //                 {
          //                   value: 335,
          //                   name: '直接访问'
          //                 },
          //                 {
          //                   value: 234,
          //                   name: '联盟广告'
          //                 },
          //                 {
          //                   value: 1548,
          //                   name: '搜索引擎'
          //                 }
          //               ]
          //             }
          //           ]
          //         });
        },
          data(){
            return{
              //用户信息
              userinfo:{},
              username:'',
              //角色
              role:'',
              //统计数据
              todayUsers:'',
              todayArticles:'',
              todayComments:'',
              totalUsers:'',
              totalArticles:'',
              totalComments:'',    
              //最火的前五个文章
              tableData:[ ],
              
             
              saleInfo:[
                { 
                  id:1,
                  name:"今日注册用户",
                  price:0,
                  icon:"user"
                },
                {
                  id:2,
                  name:"累计注册用户",
                  price:0,
                  icon:"user-solid"
                },
                {
                  id:3,
                  name:"今日发布文章数",
                  price:0,
                  icon:"notebook-1"
                },
                {
                  id:4,
                  name:"累计发布文章数",
                  price:0,
                  icon:"notebook-2"
                },
                {
                  id:5,
                  name:"今日发布评论量",
                  price:0,
                  icon:"chat-dot-square"
                },
                {
                  id:6,
                  name:"累计发布评论量",
                  price:0,
                  icon:"chat-line-square"
                },
              ]
            }
          },
          methods:{
            //查询用户个人信息
           async getUserinfo(userid){
              const res = await reqHome.getUserInfo(userid)
              if(res.code==200){            
                this.userinfo = res.data
                this.username = res.data.user.username
                this.$store.state.userinfo.icon = res.data.icon
                if(res.data.user.role==1) this.role="用户"
                else if(res.data.user.role==2) this.role="审核员"
                else this.role = "超级管理员"           
              } 
              else this.$message(res.message)
            },
            //查询统计情况
           async getDatas(userid){
             const res = await reqHome.getDatas(userid)
             if(res.code==200){
              this.todayUsers = res.data.todayUsers;
              this.todayArticles = res.data.todayArticles;
              this.todayComments = res.data.todayComments;
              this.totalUsers = res.data.totalUsers;
              this.totalArticles = res.data.totalArticles;
              this.totalComments = res.data.totalComments;
              this.saleInfo[0].price =  this.todayUsers
              this.saleInfo[1].price = this.todayArticles
              this.saleInfo[2].price = this.todayComments
              this.saleInfo[3].price = this.totalUsers
              this.saleInfo[4].price = this.totalArticles
              this.saleInfo[5].price = this.totalComments
  
              // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('echarts1'));
          // 绘制图表
          myChart.setOption({
            title: {
              text: '数据统计情况'
            },
            tooltip: {},
            xAxis: {
              data: ['今日注册', '累计注册', '今日文章', '累计文章', '今日评论', '累计评论']
            },
            yAxis: {},
            series: [
              {
                name: '数量',
                type: 'bar',
                data: [this.todayUsers,this.totalUsers,this.todayArticles,
                       this.totalArticles,this.todayComments,this.totalComments]
                // data:[12,123,312,312,312,123]
              }
            ]
          });
          var myChart2 = echarts.init(document.getElementById('echarts2'));
         myChart2.setOption({
          series: [
                    {
                    type: 'pie',
                    data: [
                        {
                        value: this.todayUsers,
                        name: '今日注册'
                        },
                        {
                        value: this.totalUsers,
                        name: '累计注册'
                        },
                        {
                        value: this.todayArticles,
                        name: '今日文章'
                        },
                        {
                          value:this.totalArticles,
                          name:'累计文章'  
                        },
                        {
                          value:this.todayComments,
                          name:'今日评论'
                        },
                        {
                          value:this.totalComments,
                          name:'累计评论' 
                        }
                    ]
                    }
                ]
         }) 
             }

           },
           //查询最火的前五个文章
           async getHotArticles(userid){
            const res =await reqHome.getHotArticles(userid);
            if(res.code==200){
              this.tableData = res.data.records;
            }
           }
  
  
          }
  }
  </script>
  
  <style lang="less" scoped>
    
    .el-main{
      overflow: hidden;
    }
   
  .user{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #a7a0a0;
    img{
      width:150px;
      height: 150px;
      border-radius: 50%;
    }
    #info{
      margin-left: 100px;
      font-size: 18px;
      color: #5a53537d;
    }
    #name{
      margin-left: 100px;
      font-size: 25px;
      font-weight: 700;
    }
  }
  .logininfo{
    margin-left: 50px;
    font-size: 14px;
    color: #535151;
  }
  .saleinfo{
    width:32%;
    display: flex;
    flex-wrap: wrap;
    
  }
  .num{
    display: flex;
    flex-wrap: wrap;
    .icon{
      width:80px;
      height:80px;
      font-size: 30px;
     
      background: #62f37f;
      text-align: center;
      line-height: 80px;
    }
    .numinfo{
      display: flex;
      flex-direction: column;
      justify-content: center;
      #price{
        margin-left: 30px;
        font-size: 20px;
      }
      #name{
        margin-left: 30px;
        font-size: 16px;
        color: #c9baba;
        text-align: center;
      }
    }
  }
  .right{
   
    .el-card{
    width:32%;
    margin-bottom: 20px;
    margin-left: 10px;
  }
    
  }
  .rightbottom{
    margin-left: 20px;
    .el-card{
      width:900px
    }
  .two{
    display: flex;
    justify-content: space-between;
    .flex{
      width:48%
    }
  }
  
  }
  
  
  </style>